<script setup>
import { ref, watch } from "vue";


const count = ref(10)
const add = () => count.value++
const cut = () => count.value--

const money = ref(100)
const makeMoney = () => money.value += 10000

const person = ref({
  name: '张三',
  age: 19
})
const changeAge = () => person.value.age++

// 1. 侦听单个数据
// 不需要.value
// watch(count, (newValue, oldValue) => {
//   console.log(`新值:${newValue} 旧值:${oldValue}`)
// })

// 2. 侦听多个数据
// watch([count, money], (newValue, oldValue) => {
//   console.log(`新值:${newValue} 旧值:${oldValue}`)
// })

// 3. 侦听复杂数据
// watch(person, (newValue) => {
//   console.log(`新值:${newValue.age}`)
// }, {
//   deep: true
// })

watch(() => person.value.age, (newValue) => {
  console.log(`新值:${newValue}`)
}, {
  immediate: true
})

</script>

<template>
  <div>
    <button @click="cut">-</button>
    <span>{{ count }}</span>
    <button @click="add">+</button>
    <hr>
    <div>钱包: {{ money }}</div>
    <button @click="makeMoney">搞钱</button>
    <hr>
    <div>人: {{ person }}</div>
    <button @click="changeAge">修改年龄</button>
  </div>
</template>

<style scoped></style>
